<template>
    <div class="scroll-list">
        <cube-slide
                id="slide"
                ref="slide"
                direction="vertical"
                :initialIndex="index"
                :data="data"
                :loop="false"
                :autoPlay="false"
                :showDots="false"
                :threshold="0.5"
                :refreshResetCurrent="false"
                @change="redChange"
                @scroll-end="scrollEnd"
        >

            <cube-slide-item
                    v-for="item in data"
                    :key="item.id"
            >
                <red-default
                        v-if="item.red_type === 'default'"
                        :red="item"
                >
                </red-default>

                <red-image
                        v-else-if="item.red_type === 'image'"
                        :red="item"
                        :change-red-id="change_red_id"
                >
                </red-image>

                <red-video
                        v-else
                        :red="item"
                        :change-red-id="change_red_id"
                >
                </red-video>
            </cube-slide-item>

        </cube-slide>
    </div>
</template>

<script>
import RedDefault from "./red/red-default"
import RedImage from "./red/red-image"
import RedVideo from "./red/red-video"
import util from "@/util/util"
export default {
    name: "scroll-list",
    data () {
      return {
          // 切换的红包id
          change_red_id: 0
      }
    },
    props: {
        data: {
            type: Array,
            default() {
                return []
            }
        },
        // 当前索引
        index: {
            type: Number,
            default: 0
        }
    },
    components: {
        RedDefault,
        RedImage,
        RedVideo
    },
    activated() {
        this.$refs.slide.refresh()
    },
    mounted() {
        if(this.data.length > 0) {
            let data = this.data[0]
            this.$emit("change",{number:data.number,numbered:data.numbered})
        }
    },
    methods: {
        /**
         * 红包切换
         */
        redChange(index) {
            let data = this.data[index]
            this.change_red_id = data.id
            util.share(data.id)
            this.$emit("change",{number:data.number,numbered:data.numbered})
        },
        /**
         * 红包切换完成
         */
        scrollEnd(index) {
            this.$emit("changed",index)
        }
    }
}
</script>

<style scoped lang="less">
    .scroll-list{
        height: 100%;
    }
    #slide{
        height: 100%;
    }
</style>
